<!DOCTYPE html>
<html th:replace="~{fragments/main :: layout(~{::title}, ~{::section}, ~{::popwin})}" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>客服管理</title>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
</head>
<body>
<section>
    <div class="layui-form">
        <div class="layui-form-item" th:if="${user.id} != null">
            <label class="layui-form-label">编号：</label>
            <div class="layui-input-block">
                <label class="layui-form-label" style="text-align: left">[[${user.id}]]</label>
                <input type="hidden" name="id" lay-filter="user" th:value="${user.id}"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户名：</label>
            <div class="layui-input-block">
                <input type="text" name="userName" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input" lay-filter="user" th:value="${user.userName}"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">状态：</label>
            <div class="layui-input-block">
                <input type="checkbox" name="status" lay-text="启用|禁用" value="1" lay-skin="switch" lay-filter="user" th:checked="${user.status} == 1">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">姓名：</label>
            <div class="layui-input-block">
                <input type="text" name="realName" required  lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input" lay-filter="user" th:value="${user.realName}">
            </div>
        </div>
        <div class="layui-form-item" th:if="${user.id} != null">
            <label class="layui-form-label">创建时间：</label>
            <div class="layui-input-block">
                <label class="layui-form-label" style="text-align: left; width: 100%">[[${#dates.format(user.createTime, 'yyyy-MM-dd HH:mm:ss')}]]</label>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">保存</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                <a href="/kf/manage" class="layui-btn layui-btn-primary">返回</a>
            </div>
        </div>
    </div>
    <th:block th:if="${user.id} != null">
        <table id="wx-table" lay-filter="test"></table>
    </th:block>
    <script src="/layui/layui.js"></script>
    <style type="text/css">
        .layui-table-cell {
            height: auto;
            line-height: 28px;
        }
    </style>
    <script th:inline="javascript">
        layui.use(['form','table','layer'], function(){
            var form = layui.form;
            var $ = layui.jquery;
            form.render({});
            form.on('submit(formDemo)', function(data){
                $.ajax({
                    url:'/kf/update',
                    type:'post',
                    data:JSON.stringify(data.field),
                    contentType: "application/json;charset=utf-8",
                    dataType:'json',
                    success:function(data){
                        if(data.code == 500){
                            layer.msg(data.msg,{icon: 5});//失败的表情
                            return;
                        }else{
                            layer.msg(data.msg, {
                                icon: 6,//成功的表情
                                time: 1000 //1秒关闭（如果不配置，默认是3秒）
                            }, function(){
                            });
                        }
                    },
                    complete: function () {
                        layer.close(this.layerIndex);
                        window.location="/kf/manage";
                    }
                });
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });
            var userId = /*[[${user.id}]]*/ 0;

            if (userId > 0) {
                var table = layui.table;

                var cols = [ //表头
                    {field: 'id', title: '编号', width:80},
                    {field: 'avatar', title: '头像', templet: '#avatarTpl', width:100},
                    {field: 'wxId', title: '微信用户名', width:200},
                    {field: 'alias', title: '别名'},
                    {field: 'nick', title: '昵称'},
                    {field: 'initStatus', title: '状态', templet: '#statusTpl'},
                    {field: 'loginTime', title: '最近活跃时间'}
                ];
                var unbind = function (obj) {
                    var data = obj.data;
                    var title = "确定解除绑定吗?";

                    layer.confirm(title, {
                        icon: 3,
                        skin: 'layer-ext-moon',
                        btn: ['确认','返回']
                    }, function(){
                        $.ajax({
                            url:'/wx/unbind',
                            type:'post',
                            data:JSON.stringify(data),
                            contentType: "application/json;charset=utf-8",
                            dataType:'json',
                            beforeSend:function () {
                                this.layerIndex = layer.load(0, { shade: [0.5, '#393D49'] });
                            },
                            success:function(data){
                                if(data.code == 500){
                                    layer.msg(data.msg,{icon: 5});//失败的表情
                                    return;
                                }else{
                                    layer.msg(data.msg, {
                                        icon: 6,//成功的表情
                                        time: 1000 //1秒关闭（如果不配置，默认是3秒）
                                    }, function(){
                                        tableIns.reload({})
                                    });
                                }
                            },
                            complete: function () {
                                layer.close(this.layerIndex);
                            },
                        });
                    });
                }
                //执行渲染
                var tableIns = table.render({
                    elem: '#wx-table', //指定原始表格元素选择器（推荐id选择器）
                    response: {
                        statusName: 'code' //规定数据状态的字段名称，默认：code
                        , statusCode: 200 //规定成功的状态码，默认：0
                        , msgName: 'message' //规定状态信息的字段名称，默认：msg
                        , dataName: 'data' //规定数据列表的字段名称，默认：data
                    }
                    , url: "/wx/listForUser?userId=[[${user.id}]]"
                    , cols: [
                        cols
                    ],
                    id:'wxTable'
                });
                table.resize('wxTable');
                table.on('tool(test)', function(obj){
                    var data = obj.data; //获得当前行数据
                    var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                    var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
                    if(layEvent == 'unbind'){
                        unbind(obj);
                    }
                })
            }
        });
        </script>
    <script type="text/html" id="avatarTpl">
        <div class="layui-btn-container">
            {{#  if(d.avatar != undefined && d.avatar != null && d.avatar != ""){ }}
            <img src="{{d.avatar}}" style="height: 64px; width: 64px;">
            {{#  } else { }}
            <img src="https://www.agri35.com/UploadFiles/img_0_1093847288_3038136586_26.jpg" style="height: 64px; width: 64px;">
            {{#  } }}

        </div>
    </script>
    <script type="text/html" id="opTpl">
        <div class="layui-btn-container">
            <a class="layui-btn layui-btn-sm" lay-event="unbind">解除绑定</a>
        </div>
    </script>
    <script type="text/html" id="statusTpl">
        {{#  if(d.initStatus == 0){ }}
        已接入
        {{#  } else { }}
        未接入
        {{#  } }}
    </script>
</section>
<div th:fragment="popwin"></div>
</body>
</html>